<template>
    <z-paging ref="paging" v-model="dataList" @query="queryList" :refresherEnabled="true" :loadingMoreEnabled="true"
    	:auto="false" :hideEmptyView="true">
			<view slot="top">
				<z-nav-bar backState="2000">育儿知识</z-nav-bar>
				<view class="u-p-20">
					<u-tabs :list="tabs" lineColor="#FFB143" :activeStyle="{color: '#FFB143'}" lineWidth="30" @change="handleTabsChange"></u-tabs>
				</view>
			</view>
      <view class="u-p-l-30 u-p-r-30 u-p-b-30 u-p-t-10">
				<custom-waterfalls-flow ref="waterfallsFlowRef" :value="dataList" @wapperClick="handleArticleDetail" @imageClick="handleArticleDetail">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" v-for="(item,index) in dataList" :key="index" slot="slot{{index}}">
						<view class="u-p-10">
							<view class="u-font-24">{{item.articleTitle}}</view>
							<view class="u-font-22 u-m-t-10" v-if="item.updateTime">{{formatDate(item.updateTime)}}</view>
							<view class="u-font-22 u-m-t-10" v-else>{{formatDate(item.createTime)}}</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="u-p-10">
							<view class="u-font-24">{{item.articleTitle}}</view>
							<view class="u-font-22 u-m-t-10" v-if="item.updateTime">{{formatDate(item.updateTime)}}</view>
							<view class="u-font-22 u-m-t-10" v-else>{{formatDate(item.createTime)}}</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			</view>
    </z-paging>
</template>
<script>
	import {jumpTypeEnum, registerTypeEnum} from '@/common/const.js'
	import {getArticleCategoryList, getArticleList} from '@/api/article.js'
	import dayjs from 'dayjs'
	import {mapGetters} from 'vuex'
	
	export default {
		data() {
			return {
				// data:{
				// 	dataList: [
				// 		{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' }, 
				// 		{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' },
				// 		{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' }, 
				// 		{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' },
				// 		{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' },
				// 		{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' },
				// 		{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '16款新生儿奶粉评测,你必须知道的事情', desc: '2022.9.14 13.6k赞' }
				// 	]
				// },
				registerTypeEnum,
				dataList:[],
				tabs: [],
				requestParams:{},
				articleCategoryList:[]
			}
		},
		onLoad() {
			this.init()
		},
		computed:{
			...mapGetters(['isLogin', 'userInfo', 'invitedCode']),
		},
		onShareAppMessage(res) {
			let invitedCode = this.userInfo.invitedCode
			let type = 'article'
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		onShareTimeline(res){
			let invitedCode = this.userInfo.invitedCode
			let type = 'article'
			let url = `/pages/main/index?invitedCode=${invitedCode}&type=${type}&registerType=${registerTypeEnum.share_friend_circle}`
			console.log(url)
			return {
				title: '伊利高个子母婴专卖店',
				path: url
			}
		},
		methods:{
			
			/**
			 * 初始化
			 */
			init(){
				this.tabs = []
				getArticleCategoryList().then(res=>{
					this.tabs.push({
						name:'推荐'
					})
					res.data.forEach(item=>{
						this.tabs.push({
							name:item.categoryName
						})
					})
					this.requestParams.categoryId = ''
					this.articleCategoryList = res.data
					this.reload()
				})
				this.shareMenuStatus()
			},
			
			/**
			 * 判断是否可以分享
			 */
			shareMenuStatus(){
				if(this.isLogin){
					console.log("打开分享")
					uni.showShareMenu({
						menus: ['shareAppMessage', 'shareTimeline']
					})
				} else {
					console.log("关闭分享")
					uni.hideShareMenu({
						
					})
				}
			},
			
			/**
			 * 列表重新加载
			 */
			reload(){
				setTimeout(()=>{
					// 重新加载
					this.$refs.paging.reload()
				},100)
			},
			
			/**
			 * 获取分类
			 */
			queryList(pageNo, pageSize){
				this.requestParams.current = pageNo
				this.requestParams.size = pageSize
				getArticleList(this.requestParams).then(res=>{
					if(pageNo == 1){
						this.dataList = []
						this.$refs.waterfallsFlowRef.refresh();
					}
					let data = res.data.records
					data.forEach(item=>{
						//let images = item.articleImages.split(",")
						let images = JSON.parse(item.articleImages)
						if(!item.hasOwnProperty('image')){
							this.$set(item, 'image', images[0].materialUrl)
						} else {
							item.image = images[0].materialUrl
						}
					})
					this.dataList = this.dataList.concat(data);
					console.log(this.dataList)
					
					this.$refs.paging.complete(res.data.records);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
				
			},
			
			/**
			 * 格式化优惠券时间
			 */
			formatDate(val){
				return dayjs(val).format('YYYY-MM-DD')
			},
			
			/**
			 * 跳转详情
			 */
			handleArticleDetail(item){
				this.jumpUtil.jumpTo(jumpTypeEnum.navigate, `/pages_one/article/detail?articleId=${item.id}`, false)
			},
			
			/**
			 * 切换分类
			 */
			handleTabsChange(e){
				let index = e.index
				if(index == 0){
					this.requestParams.categoryId = ''
				} else {
					let data = this.articleCategoryList[index - 1]
					this.requestParams.categoryId = data.id
					console.log(index)
				}
				this.reload()
			}
		}
		// reset(){
		//     this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
		//     this.$refs.waterfallsFlowRef.refresh();
		// }
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>